<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精灵图练习fonts</title>
    <style>

        .box1 {
            background: url('../img/sprites.png') no-repeat 0 -461px;
            width: 236px;
            height: 107px;
        }

        .pinyin {
            margin: 30px auto;
            width: 500px;
        }

        .pinyin span {
            display: inline-block;
            background: url('../img/abcd.jpeg') no-repeat;
        }

        .pinyin span:nth-of-type(1) {
            background-position: -360px 0;
            width: 104px;
            height: 120px;
        }

        .pinyin span:nth-of-type(2) {
            background-position: -120px -8px;
            width: 107px;
            height: 112px;
        }

        .pinyin span:nth-of-type(3) {
            background: url('../img/abcd.jpeg') no-repeat -480px 0;
            width: 104px;
            height: 120px;
        }

        .pinyin span:nth-of-type(4) {
            background: url('../img/abcd.jpeg') no-repeat -3px -414px;
            width: 117px;
            height: 117px;
        }

    </style>
</head>
<body>
<div class="box1">
</div>
<div class="pinyin">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>


</body>
</html>